<template>
  <div>
    <el-table :data="tab" style="width: 100%">
      <!-- 商品封面列 -->
      <el-table-column label="商品封面" width="100">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.orderItem.bookImage"
            :preview-src-list="[scope.row.orderItem.bookImage]"
          ></el-image>
        </template>
      </el-table-column>

      <!-- 商品名字列 -->
      <el-table-column prop="orderItem.bookName" label="商品名字"></el-table-column>

      <!-- 订单号列 -->
      <el-table-column prop="orderInfo.orderNum" label="订单号"></el-table-column>

      <!-- 商品数量 -->
      <el-table-column prop="orderItem.bookCount" label="商品数量"></el-table-column>

      <!-- 总计 -->
      <el-table-column prop="orderInfo.orderPrice" label="总计"></el-table-column>

      <!-- 是否支付 -->
      <el-table-column label="进行支付">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="payOrder(scope.row.orderInfo.orderNum)"
            icon="el-icon-circle-check"
            circle
          ></el-button>
        </template>
      </el-table-column>

      <!-- 取消订单 -->
      <el-table-column label="取消订单">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="cancelOrder(scope.row.orderInfos.orderNum)"
            icon="el-icon-circle-close"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "MyOrder",
  data() {
    return {
      tab: [], // 初始化为空数组，准备存储表格数据
    };
  },
  methods: {
    getOrder(){
      this.$http.post('/orderInfo/getOrderList', {})
      .then(resp => {
          console.log(resp);
          this.tab = resp.data.data; // 确保解析正确
      }).catch(error => {
          console.error("请求失败:", error);
          alert("订单获取失败，请稍后再试。");
      });
    },
    payOrder(orderNum) {
      console.log(`支付订单号: ${orderNum}`);
      let formData = new FormData();
      console.log(orderNum)
      formData.append('orderNum', orderNum);
      this.$http.post('/orderInfo/pay', formData).then(resp => {
        document.write(resp.data.data);
        if(resp.data.success) {
          // alert("支付成功！");

          // this.getOrder(); // 支付成功后，更新订单列表

        } else {
          alert("支付失败，请重试！");
        }
      }).catch(error => {
        console.error("支付请求失败:", error);
      });
    },
    cancelOrder(orderNum) {
      console.log(`取消订单号: ${orderNum}`);
      this.$http.post('/orderInfo/cancel', { orderNum }).then(resp => {
        if(resp.data.success) {
          alert("订单取消成功！");
          this.getOrder(); // 取消成功后，更新订单列表
        } else {
          alert("订单取消失败，请重试！");
        }
      }).catch(error => {
        console.error("取消请求失败:", error);
      });
    },
  },
  created() {
    this.getOrder();
  }
};
</script>

<style scoped>
/* 可根据需求添加样式 */
</style>
